import React, { useState } from 'react';
import "../play_method/index.scss";
const Play = () => {
  const [selectedMatches, setSelectedMatches] = useState(new Set());
  const [betType, setBetType] = useState('single'); // single or mixed

  const matches = [
    {
      id: 1,
      league: '亚冠精英',
      time: '2025-10-21 15:35',
      home: '墨尔本城',
      away: '布里兰',
      odds: { win: 1.82, draw: 3.50, lose: 3.40 },
      selectedOdds: null
    },
    {
      id: 2,
      league: '亚冠精英',
      time: '2025-10-21 17:50',
      home: '成都蓉城',
      away: '柔佛',
      odds: { win: 2.60, draw: 3.45, lose: 2.20 },
      selectedOdds: null
    },
    {
      id: 3,
      league: '亚冠精英',
      time: '2025-10-21 17:50',
      home: '蔚山现代',
      away: '广岛三箭',
      odds: { win: 3.55, draw: 3.45, lose: 1.80 },
      selectedOdds: null
    },
    {
      id: 4,
      league: '亚冠精英',
      time: '2025-10-21 20:05',
      home: '上海海港',
      away: '町田泽维',
      odds: { win: 4.70, draw: 4.00, lose: 1.50 },
      selectedOdds: null
    },
    {
      id: 5,
      league: '亚冠精英',
      time: '2025-10-21 21:50',
      home: '迪拜国青',
      away: '纳萨夫',
      odds: { win: 1.38, draw: 4.15, lose: 6.10 },
      selectedOdds: null
    },
    {
      id: 6,
      league: '欧冠',
      time: '2025-10-21 21:50',
      home: '阿拉木图',
      away: '帕福斯',
      odds: { win: 2.53, draw: 2.95, lose: 2.53 },
      selectedOdds: null
    }
  ];

  const handleSelectMatch = (matchId, oddsType) => {
    const newSelectedMatches = new Set(selectedMatches);
    
    if (newSelectedMatches.has(matchId)) {
      // 如果已经选中，取消选择
      newSelectedMatches.delete(matchId);
    } else {
      // 如果未选中，添加选择
      newSelectedMatches.add(matchId);
    }
    
    setSelectedMatches(newSelectedMatches);
    
    // 更新选中的赔率
    const updatedMatches = [...matches];
    const matchIndex = updatedMatches.findIndex(m => m.id === matchId);
    if (matchIndex !== -1) {
      updatedMatches[matchIndex].selectedOdds = oddsType;
    }
    
    // 更新状态（这里只是示例，实际应用中可能需要更复杂的状态管理）
  };

  const calculateTotalOdds = () => {
    let totalOdds = 1;
    const selectedMatchIds = Array.from(selectedMatches);
    
    selectedMatchIds.forEach(matchId => {
      const match = matches.find(m => m.id === matchId);
      if (match && match.selectedOdds) {
        totalOdds *= match.odds[match.selectedOdds];
      }
    });
    
    return totalOdds.toFixed(2);
  };

  const handleSubmit = () => {
    alert(`已提交投注！共选择${selectedMatches.size}场比赛，总赔率：${calculateTotalOdds()}`);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-cyan-50 p-4 phts">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <button className="text-gray-600 text-xl">←</button>
        <div className="bg-white rounded-full px-4 py-2 shadow-sm">
          <span className="text-lg font-semibold">混合玩法</span>
          <span className="ml-1 text-xs text-gray-500">▼</span>
        </div>
      </div>

      {/* Date Info */}
      <div className="bg-white rounded-full px-6 py-3 mb-6 shadow-md flex items-center justify-center">
        <span className="text-lg font-medium">2025-10-21 周二</span>
        <span className="mx-1 text-blue-600 font-bold">18</span>
        <span className="text-lg font-medium">场比赛</span>
      </div>

      {/* Matches List */}
      <div className="space-y-4">
        {matches.map((match) => (
          <div key={match.id} className="bg-white rounded-xl shadow-md overflow-hidden">
            {/* League and Time */}
            <div className="px-4 py-2 bg-gradient-to-r from-green-600 to-green-500 text-white">
              <div className="flex justify-between items-center">
                <span className="font-semibold">{match.league}</span>
                <span className="text-sm">{match.time}</span>
              </div>
            </div>

            {/* Match Info */}
            <div className="px-4 py-3">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center space-x-2">
                  <span className="text-sm font-medium text-gray-600">主</span>
                  <span className="font-bold text-blue-600">{match.home}</span>
                </div>
                <span className="text-lg font-bold">VS</span>
                <div className="flex items-center space-x-2">
                  <span className="text-sm font-medium text-gray-600">客</span>
                  <span className="font-bold text-red-600">{match.away}</span>
                </div>
              </div>

              {/* Odds Selection */}
              <div className="grid grid-cols-3 gap-2 mb-3">
                <button 
                  onClick={() => handleSelectMatch(match.id, 'win')}
                  className={`py-2 px-3 rounded-md text-center transition-all ${
                    match.selectedOdds === 'win' 
                      ? 'bg-blue-100 border-2 border-blue-500 text-blue-700' 
                      : 'bg-gray-100 hover:bg-gray-200'
                  }`}
                >
                  <div className="text-sm font-medium">胜</div>
                  <div className="text-lg font-bold">{match.odds.win}</div>
                </button>
                <button 
                  onClick={() => handleSelectMatch(match.id, 'draw')}
                  className={`py-2 px-3 rounded-md text-center transition-all ${
                    match.selectedOdds === 'draw' 
                      ? 'bg-yellow-100 border-2 border-yellow-500 text-yellow-700' 
                      : 'bg-gray-100 hover:bg-gray-200'
                  }`}
                >
                  <div className="text-sm font-medium">平</div>
                  <div className="text-lg font-bold">{match.odds.draw}</div>
                </button>
                <button 
                  onClick={() => handleSelectMatch(match.id, 'lose')}
                  className={`py-2 px-3 rounded-md text-center transition-all ${
                    match.selectedOdds === 'lose' 
                      ? 'bg-red-100 border-2 border-red-500 text-red-700' 
                      : 'bg-gray-100 hover:bg-gray-200'
                  }`}
                >
                  <div className="text-sm font-medium">负</div>
                  <div className="text-lg font-bold">{match.odds.lose}</div>
                </button>
              </div>

              {/* More Options */}
              <div className="flex justify-between items-center">
                <div className="flex items-center space-x-2">
                  <span className="text-sm text-gray-500">0</span>
                  <button className="bg-blue-500 text-white px-2 py-1 rounded-md text-xs">
                    +1
                  </button>
                </div>
                <button className="bg-blue-50 text-blue-600 px-3 py-1 rounded-md text-sm">
                  更多玩法
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Footer Bet Panel */}
      <div className="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4">
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center space-x-2">
            <span className="text-sm text-gray-600">至少选1场单关或任意2场比赛</span>
          </div>
          <div className="flex items-center space-x-4">
            <div className="text-sm text-gray-500">页面赔率仅供参考</div>
          </div>
        </div>
        
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <button className="text-gray-600 text-xl">🗑️</button>
            <div className="flex items-center space-x-2">
              <span className="text-sm">当前选中:</span>
              <span className="text-lg font-bold text-blue-600">{selectedMatches.size}</span>
              <span className="text-sm">场</span>
            </div>
            <div className="flex items-center space-x-2">
              <span className="text-sm">总赔率:</span>
              <span className="text-lg font-bold text-green-600">{calculateTotalOdds()}</span>
            </div>
          </div>
          
          <button 
            onClick={handleSubmit}
            disabled={selectedMatches.size === 0}
            className={`px-6 py-3 rounded-lg font-bold text-white transition-all ${
              selectedMatches.size > 0 
                ? 'bg-blue-600 hover:bg-blue-700' 
                : 'bg-gray-400 cursor-not-allowed'
            }`}
          >
            提交
          </button>
        </div>
      </div>
    </div>
  );
};

export default Play;